<template>
  <el-drawer
    append-to-body
    destroy-on-close
    :size="size"
    :title="title"
    :visible.sync="drawer"
    @close="close"
  >
    <div v-if="drawer">
      <div v-if="deviceList.length > 0" class="deviceList">
        <div
          v-for="item in deviceList"
          :key="item.id"
          class="deviceBox"
          @click="unbind(item)"
        >
          <div class="info">
            <div class="name">{{ item.lock_alias }}</div>
            <div class="status">电量：{{ item.electric_quantity }}%</div>
          </div>
          <i class="el-icon-remove-outline"></i>
        </div>
      </div>
      <div v-else class="noLock">
        <el-empty description="暂无记录" />
        <el-button type="primary" @click="addBind">关联房间锁</el-button>
      </div>
    </div>
    <lock-list-div ref="lockList" @fetch-data="setList" />
  </el-drawer>
</template>
<script>
import { lockList , lockUnbind } from '@/api/device'
import { getgroup } from '@/api/group'
import lockListDiv from './lockList'
export default {
  name: 'deviceList',
  components: { lockListDiv },
  data() {
    return {
      size: 500,
      title: '',
      deviceList: [],
      drawer: false,
      group_id: '',
      group: [],
      formData: {
        room_id: '',
        group_id: '',
      },
    }
  },
  methods: {
    showEdit(row) {
      this.formData.room_id = row.id
      this.group_id = row.group_id
      this.title = '关联设备管理(' + row.room_address + ')'
      this.getGroupList()
      this.drawer = true
    },
    addBind() {
      this.$refs['lockList'].showEdit(this.formData)
    },
    unbind(item) {
      this.$baseConfirm('你确定要解除关联此锁吗？', null, async () => {
        const { data } = await lockUnbind({ lock_id: item.lock_id })
        if (data.is_success) {
          this.$baseMessage('解绑成功', 'success', 'vab-hey-message-success')
          await this.setList()
        }
      })
    },
    close() {
      this.drawer = false
    },
    setList() {
      this.getDevice()
      this.$emit('fetch-data')
    },
    async getGroupList() {
      const { data } = await getgroup({})
      this.group = data
      for (let i = 0; i < this.group.length; i++) {
        if (this.group_id == this.group[i].id) {
          this.formData.group_id = this.group[i].tt_group_id
        }
      }
      this.getDevice()
    },
    async getDevice() {
      const { data } = await lockList(this.formData)
      this.deviceList = data.items
    },
  },
}
</script>
<style lang="scss" scoped>
.deviceList {
  padding: 20px;
  .deviceBox {
    padding: 16px;
    background: #f0f7ff;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:hover {
      box-shadow: 0 0 12px #ccc;
    }
    .name {
      font-size: 16px;
      color: #000;
      font-weight: bolder;
      line-height: 26px;
    }
    .detail {
      font-size: 14px;
      color: #3f3f3f;
      margin-top: 4px;
    }
    .el-icon-remove-outline {
      font-size: 16px;
      color: #f56c6c;
    }
  }
}
.noLock {
  text-align: center;
}
</style>